<template>
  <div>
    <h3 v-if="id==undefined">添加台区</h3>
    <h3 v-if="id!=undefined">台区编辑</h3>
    <x-button type="primary" @click.native="back">返回</x-button>
    <group class="group">
      <x-input title="归属地：" placeholder="请输入内容" v-model="data.location"></x-input>
      <x-input title="台区号：" placeholder="请输入内容" v-model="data.areaNo"></x-input>
      <x-input title="台区地点：" placeholder="请输入内容" v-model="data.address"></x-input>
      <x-input title="信道：" placeholder="请输入内容" v-model="data.channel"></x-input>
      <popup-radio title="GPRS：" :options="gprsOptions" v-model="data.GPRS">
        <p slot="popup-header" class="vux-1px-b popup-slot">是否有GPRS</p>
      </popup-radio>

      <calendar title="最后通讯时间：" v-model="data.lassUpdateTime" readonly></calendar>

      <popup-radio title="运行模式：" :options="modeOptions" v-model="data.mode">
        <p slot="popup-header" class="vux-1px-b popup-slot">请选择运行模式</p>
      </popup-radio>
      <popup-radio title="平衡模式：" :options="balanceModeOptions" v-model="data.balanceMode">
        <p slot="popup-header" class="vux-1px-b popup-slot">请选择平衡模式</p>
      </popup-radio>
      <x-input title="变压器容量：" placeholder="请输入内容" v-model="data.transformerCapacity"><i slot="right">KVA</i></x-input>
      <x-input title="负载率限值：" placeholder="请输入内容" v-model="data.loadRateLimit">
        <i slot="right">%</i>
      </x-input>
      <x-input title="不平衡度限值：" placeholder="请输入内容" v-model="data.imbalancesLimit">
        <i slot="right">%</i>
      </x-input>
      <x-input title="零线电流限值：" placeholder="请输入内容" v-model="data.neutralWireLimit">
        <i slot="right">A</i>
      </x-input>
      <x-input title="指令阈值：" placeholder="请输入内容" v-model="data.cmdValue"></x-input>
      <x-input title="服务器一端口：" placeholder="请输入内容" v-model="data.server1Port"></x-input>
      <x-input title="服务器一IP：" placeholder="请输入内容" v-model="data.server1IP"></x-input>
      <x-input title="服务器一APN：" placeholder="请输入内容" v-model="data.server1APN"></x-input>
      <x-input title="服务器二端口：" placeholder="请输入内容" v-model="data.server2Port"></x-input>
      <x-input title="服务器二IP：" placeholder="请输入内容" v-model="data.server2IP"></x-input>
      <x-input title="服务器二APN：" placeholder="请输入内容" v-model="data.server2APN"></x-input>
      <x-input title="CT1：" placeholder="请输入内容" v-model="data.CT1"></x-input>
      <x-input title="CT2：" placeholder="请输入内容" v-model="data.CT2"></x-input>
      <x-input title="CCID：" placeholder="请输入内容" v-model="data.CCID" :disabled="id!=undefined"></x-input>
      
    </group>
    <x-button class="save-button" type="primary" @click.native="save">保存</x-button>
    
    <loading :show="showLoading" text="加载中..."></loading>
    <toast v-model="showToast1" type="success" text="保存成功"></toast>
    <toast v-model="showToast2" type="cancel" :text="showToast2Text"></toast>
  </div>
</template>

<script>
import { Group, XButton, XInput, Calendar, PopupRadio ,Loading , Toast} from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    Group,
    XButton,
    XInput,
    Calendar,
    PopupRadio,
    Loading,
    Toast
  },
  data() {
    return {
      id:0,
      data:{},
      CCID:"",

      showLoading:false,
      showToast1:false,
      showToast2:false,
      showToast2Text:"",
 
      gprsOptions: [
        {
          key: 1,
          value: "有"
        },
        {
          key: 0,
          value: "无"
        }
      ],
      modeOptions: [
        {
          key: 1,
          value: "自动"
        },
        {
          key: 0,
          value: "手动"
        }
      ],
      balanceModeOptions: [
        {
          key:0,
          value: "电流"
        },
        {
          key:1,
          value: "视在功率"
        },
        {
          key:2,
          value: "智能平衡"
        }
      ]
    };
  },
  mounted() {
    this.getId();
    this.getData(this.id);
    
  },
  watch:{
    CCID:function(){
      this.showLoading = false
    }
  },
  methods: {
    getId() {
      this.id = this.$route.query.id; 
      if(this.id!=undefined){
        this.showLoading = true
      }
    },

    getData(id) {
      const self = this;
      const param = { id: id };
      const url = "/yitai/admin/areaInfo";
      const success = function(response) {

        self.data = response.data.info;
        self.CCID = response.data.info.CCID;
      };
      const failed = function() {

      };
      Http.http(url, param, success, failed);
    },


    back() {
      this.$router.go(-1);
    },

    save() {
      const self = this;
      let param = { id: self.id };
      param['location'] = self.data.location;
      param['areaNo'] = self.data.areaNo;
      param['address'] = self.data.address;
      param['status'] = self.data.status;
      param['user'] = self.data.user;
      param['IP'] = self.data.IP;
      param['channel'] = self.data.channel;
      param['GPRS'] = self.data.GPRS;
      param['lassUpdateTime'] = self.data.lassUpdateTime;
      param['callDate'] = self.data.callDate;
      param['callTime'] = self.data.callTime;
      param['mode'] = self.data.mode;
      param['balanceMode'] = self.data.balanceMode;
      param['transformerCapacity'] = self.data.transformerCapacity;
      param['loadRateLimit'] = self.data.loadRateLimit;
      param['imbalancesLimit'] = self.data.imbalancesLimit;
      param['neutralWireLimit'] = self.data.neutralWireLimit;
      param['cmdValue'] = self.data.cmdValue;
      param['server1Port'] = self.data.server1Port;
      param['server1IP'] = self.data.server1IP;
      param['server1APN'] = self.data.server1APN;
      param['server2Port'] = self.data.server2Port;
      param['server2IP'] = self.data.server2IP;
      param['server2APN'] = self.data.server2APN;
      param['CT1'] = self.data.CT1;
      param['CT2'] = self.data.CT2;
      param['CCID'] = self.data.CCID;
 
      if(!param.location){
        self.showToast2Text = "归属地不能为空"
        self.showToast2 = true;
      }else if(!param.areaNo){
        self.showToast2Text = "台区号不能为空"
        self.showToast2 = true;
      }else{
        const url = "/yitai/admin/updateArea";
        const success = function(response) {
   
      
          const status = response.data.status
          if(status == 200){
            self.showToast1 = true;
            setTimeout(() => {
              self.back();
            }, 600); 
          }else if(status == 500){
            self.showToast2Text = "该台区已经存在"
            self.showToast2 = true; 
          }    
        };
        const failed = function() {
        
          self.showToast2Text = "保存失败"
          self.showToast2 = true;    
        };
        Http.http(url, param, success, failed);
      }     
    }

  }
};
</script>





<style scoped >
h3 {
  margin-bottom: 20px;
}

button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.popup-slot {
  text-align: center;
  padding: 8px 0;
  color: #888;
}

.save-button {
  margin-top: 20px;
}

.group .weui-cells .weui-cell,
.group .weui-cells .vux-calendar {
  font-size: 18px ;
}


i {
  color: #005e9c;
  font-size: 18px;
}
</style>